{% extends "learning/base.html" %}

{% block title %}我的笔记本{% endblock %}

{% block content %}
<div style="display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap;margin-bottom:2rem;">
    <div>
        <h2 style="margin:0;font-size:2.25rem;font-weight:800;letter-spacing:-0.02em;">我的笔记本</h2>
        <p style="margin:0.5rem 0 0;color:var(--text-secondary);font-size:0.95rem;">
            记录学习心得、沉淀题目解析，优秀笔记还能提交给老师审核公开。
        </p>
    </div>
    <a class="button" href="{% url 'learning:notebook_create' %}" style="padding:0.75rem 1.5rem;">
        ✨ 新建笔记
    </a>
</div>

<section class="dashboard-grid">
    <div class="stat-card">
        <div class="stat-label">笔记总数</div>
        <div class="stat-value" style="color:var(--accent);">{{ total_count }}</div>
        <p style="margin:0.75rem 0 0;color:var(--text-secondary);font-size:0.875rem;">
            当前保存的全部笔记数量
        </p>
    </div>
    <div class="stat-card">
        <div class="stat-label">待审核</div>
        <div class="stat-value" style="color:var(--warning);">{{ pending_count }}</div>
        <p style="margin:0.75rem 0 0;color:var(--text-secondary);font-size:0.875rem;">
            老师审核通过后将展示在公共笔记
        </p>
    </div>
    <div class="stat-card">
        <div class="stat-label">公开笔记</div>
        <div class="stat-value" style="color:var(--success);">{{ public_entries|length }}</div>
        <p style="margin:0.75rem 0 0;color:var(--text-secondary);font-size:0.875rem;">
            已经在公共笔记中展示的数量
        </p>
    </div>
</section>

{% if entries %}
    {% if draft_entries %}
    <section class="card" style="margin-top:2rem;">
        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem;gap:1rem;flex-wrap:wrap;">
            <div>
                <h3 style="margin:0;">📝 草稿</h3>
                <p style="margin:0;color:var(--text-secondary);font-size:0.9rem;">随时继续完善或提交审核</p>
            </div>
            <span class="pill warning">{{ draft_entries|length }} 篇</span>
        </div>
        <div class="mistake-feed">
            {% for entry in draft_entries %}
            <article class="feed-item">
                <div class="feed-header">
                    <h4 class="feed-title">{{ entry.title }}</h4>
                    <span class="pill">草稿</span>
                </div>
                <div class="feed-meta">
                    <span>🕐 更新于 {{ entry.updated_at|date:"Y-m-d H:i" }}</span>
                    <span>🖼️ 图片 {{ entry.attachments.all|length }}</span>
                    <span>🔗 关联错题 {{ entry.related_mistakes.all|length }}</span>
                </div>
                <p style="margin:0.75rem 0 0;color:var(--text-secondary);font-size:0.95rem;line-height:1.6;">
                    {{ entry.content|striptags|truncatechars:160 }}
                </p>
                <div class="action-group" style="margin-top:0.75rem;">
                    <a class="button small secondary" href="{{ entry.get_absolute_url }}">预览</a>
                    <a class="button small" href="{% url 'learning:notebook_edit' entry.pk %}">继续编辑</a>
                    <form method="post" action="{% url 'learning:notebook_submit' entry.pk %}" class="inline-form">
                        {% csrf_token %}
                        <button type="submit" class="button small success">提交审核</button>
                    </form>
                </div>
            </article>
            {% endfor %}
        </div>
    </section>
    {% endif %}

    {% if submitted_entries %}
    <section class="card" style="margin-top:2rem;">
        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem;gap:1rem;flex-wrap:wrap;">
            <div>
                <h3 style="margin:0;">⏳ 待审核</h3>
                <p style="margin:0;color:var(--text-secondary);font-size:0.9rem;">老师审核后将公开展示</p>
            </div>
            <span class="pill warning">{{ submitted_entries|length }} 篇</span>
        </div>
        <div class="mistake-feed">
            {% for entry in submitted_entries %}
            <article class="feed-item">
                <div class="feed-header">
                    <h4 class="feed-title">{{ entry.title }}</h4>
                    <span class="pill warning">待审核</span>
                </div>
                <div class="feed-meta">
                    <span>📤 提交时间 {{ entry.submitted_at|date:"Y-m-d H:i" }}</span>
                    <span>🖼️ 图片 {{ entry.attachments.all|length }}</span>
                    <span>🔗 关联错题 {{ entry.related_mistakes.all|length }}</span>
                </div>
                <p style="margin:0.75rem 0 0;color:var(--text-secondary);font-size:0.95rem;line-height:1.6;">
                    {{ entry.content|striptags|truncatechars:160 }}
                </p>
                <div class="action-group" style="margin-top:0.75rem;">
                    <a class="button small secondary" href="{{ entry.get_absolute_url }}">查看详情</a>
                    <a class="button small" href="{% url 'learning:notebook_edit' entry.pk %}">修改后再提交</a>
                    <form method="post" action="{% url 'learning:notebook_withdraw' entry.pk %}" class="inline-form">
                        {% csrf_token %}
                        <button type="submit" class="button small secondary">撤回提交</button>
                    </form>
                </div>
            </article>
            {% endfor %}
        </div>
    </section>
    {% endif %}

    {% if public_entries %}
    <section class="card" style="margin-top:2rem;">
        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem;gap:1rem;flex-wrap:wrap;">
            <div>
                <h3 style="margin:0;">🌟 已公开</h3>
                <p style="margin:0;color:var(--text-secondary);font-size:0.9rem;">在公共笔记区展示的优秀内容</p>
            </div>
            <span class="pill success">{{ public_entries|length }} 篇</span>
        </div>
        <div class="mistake-feed">
            {% for entry in public_entries %}
            <article class="feed-item">
                <div class="feed-header">
                    <h4 class="feed-title">{{ entry.title }}</h4>
                    <span class="pill success">已公开</span>
                </div>
                <div class="feed-meta">
                    <span>📅 发布于 {{ entry.published_at|date:"Y-m-d H:i" }}</span>
                    <span>🖼️ 图片 {{ entry.attachments.all|length }}</span>
                    <span>🔗 关联错题 {{ entry.related_mistakes.all|length }}</span>
                </div>
                <p style="margin:0.75rem 0 0;color:var(--text-secondary);font-size:0.95rem;line-height:1.6;">
                    {{ entry.content|striptags|truncatechars:160 }}
                </p>
                <div class="action-group" style="margin-top:0.75rem;">
                    <a class="button small secondary" href="{{ entry.get_absolute_url }}">查看公开页面</a>
                    <a class="button small" href="{% url 'learning:notebook_edit' entry.pk %}">继续完善</a>
                </div>
            </article>
            {% endfor %}
        </div>
    </section>
    {% endif %}
{% else %}
<section class="card" style="text-align:center;padding:3rem 1rem;">
    <div style="font-size:3rem;margin-bottom:1rem;opacity:0.3;">📔</div>
    <p style="margin:0 0 1.5rem 0;color:var(--text-secondary);font-size:1.05rem;">
        还没有创建任何笔记，点击右上角按钮开始记录学习心得吧！
    </p>
    <a class="button" href="{% url 'learning:notebook_create' %}">立即创建第一篇笔记</a>
</section>
{% endif %}
{% endblock %}
